<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内容渲染指令</title>
    <!--1、导入vue.js，在window全局中就有了vue的构造函数（就和导入jQuery，window全局就有$可以使用一样）-->
    <script src="../js/vue_2.7.8.js" ></script>
</head>
<body>

<!--2、写希望让vue控制的html区域-->
<div id="app">
    <!--v-text会覆盖标签中的内容-->
    <p v-text="name">这里会被替代</p>
    <!--由于v-text的缺陷，所以出现了插值表达式的语法-->
    <p >姓名：{{name}}</p>
    <!--如果想要写入的是一段需要渲染的html内容，需要使用v-html才行-->
    <p v-html="desc"></p>
</div>

</body>
</html>
<script>

    //3.创建vue对象，并渲染dom
    new Vue({
        //vue的固定写法，表示vue要控制的哪个dom；接收的是个选择器
        el:"#app",
        //data是要渲染的数据
        data:{
            name:'Mr_x',
            desc:'<span style="color: red">这里是简介</span>'
        }
    });

</script>
